<template>
  <div class="context">
    <el-empty description="没有数据" v-if="data.length == 0"/>
    <el-row v-else style="height: 150px;margin-bottom: 17px;cursor: pointer;" v-for="(item,idx) in data" @click="showWriteInfo(item.uuid)">
      <el-col :span="20" >
        <el-row>
          <el-col :span="24" style="margin-bottom: 10px;color: #252933">{{item.title}}</el-col>
          <el-col :span="24" style="margin-bottom: 10px;height: 70px;overflow: hidden" class="fontColor">{{item.description}}</el-col>
          <el-col :span="24" class="fontColor">
            <span>{{item.name}} &nbsp | &nbsp</span>
            <span>{{item.create_time.split("T")[0]}} &nbsp | &nbsp</span>
            <span style="font-size: 15px">
              <el-image style="width: 20px; height: 20px" :src="look"/>
              &nbsp{{item.watch}}
              &nbsp  &nbsp
            </span>
            <span style="font-size: 15px">
              <el-image  style="width: 20px; height: 20px" :src="yesClick"/>
              &nbsp
              {{item.stars}}
            </span>
          </el-col>
        </el-row>
      </el-col>
      <el-col :span="4">
        <el-image style="width: 100%;height: 150px" :src="'http://localhost:8080/files/shows/' +item.show_photo" />
      </el-col>
      <!--      <el-divider />-->
    </el-row>

    <div style="width: 100%;text-align: center;"  v-if="data.length != 0">
      <div style="text-align: center;">
        <el-pagination
            layout="prev, pager, next"
            :total="pages.dataPage"
            :default-page-size="5"
            @current-change="draftsHandleCurrentChange"
        />
      </div>
    </div>
  </div>
</template>

<script setup>
import {ref , onMounted} from 'vue'
import look from '@/assets/icon/look-number.png'
import noClick from '@/assets/icon/no-click.png'
import yesClick from '@/assets/icon/yes-click.png'
import axios from "axios";

import {useRoute, useRouter} from 'vue-router'
const router = useRouter()
const value = ref(false)
const data = ref([])

const useRouter1 = useRoute();
const useRouteStatus = useRouter1.params.status

// 分页数据
const pages = ref({
  dataPage: 0,
})

onMounted(()=>{
  const token = localStorage.getItem("token");
  if(token !== null && token !== undefined){
    getAllDataByLimit(1,5);
  }

})

const getAllDataByLimit = (start,page) =>{
  axios.get("writes/all/"+ useRouteStatus,{
    params: {
      start: Number(start),
      pages: Number(page),
    }
  }).then(res =>{
    // console.log("data",res.data)
    data.value = res.data
    pages.value.dataPage = res.data[data.value.length - 1].total;
    data.value.splice(data.value.length - 1, 1)
  })
}

const showWriteInfo = (uuid)=>{
  // console.log(uuid)
  router.push("/index/writes/"+uuid);
  axios.get("writes/watch/"+uuid).then(res=>{

  })
}

const draftsHandleCurrentChange = (number) => {
  // console.log("你好",number)
  getAllDataByLimit(number, 5)
}
</script>



<style scoped>
.context{
  margin: 0 auto;
  margin-top: 2%;
  width: 75%;
  /* min-height: 85vh;*/
  background-color: white;
  padding: 25px;
}
.fontColor{
  color: #8a919f;
}
</style>